{% extends '__base__.html' %}

{% block title %}协议分析配置-数据库配置{% endblock %}

{% block beforehead %}

<script>


function show_upload_config(config, remotes) {
    check_s = new Array(remotes.length);
    uncheck_s = new Array(remotes.length);
    for(var i=0; i<remotes.length; i++) {
        check_s[i] = false;
        uncheck_s[i] = true;
    }
    //alert(remotes.length);
    var show_remotes_vm = new Vue({
        el : '#model_remote_list',
        data: {
            show_config: config,
            show_remotes: remotes,
            checkedServers: check_s
        },
        methods: {
            do_upload: function (event) {
                var cs = '';
                for(var i=0; i<show_remotes_vm.checkedServers.length; i++) {
                    var tmp = show_remotes_vm.checkedServers[i]==true?show_remotes_vm.show_remotes[i].id:0;
                    cs += tmp + '|';
                }
                // alert(cs);
                postApi('/api/configs/upload_to_servers', {
                    show_config_id: config.id,
                    checkedServers: cs
                }, function (err, r) {
                    if (err) {
                        return showError(err)
                    }
                    location.reload();
                });
            }
        }
    });
    show_remotes_vm.show_remotes = remotes;
};
function initVM(data) {
    $('#div-configs').show();

    var vm = new Vue({
        el: '#div-configs',
        data: {
            xyfx_configs: data.xyfx_configs,
            xyfx_remotes: data.xyfx_remotes
        },
        methods: {
            edit_config: function (config) {
                showConfirm('确认编辑？', '确认要编辑“' + config.name + '”？', function () {
                    postApi('/api/configs/' + config.id + '/edit', {}, function (err, r) {
                        if (err) {
                            return showError(err)
                        }
                        location.reload()
                    });
                });
            },
            delete_config: function (config) {
                showConfirm('确认删除？', '确认要删除评论“' + config.name + '”？删除后不可恢复！', function () {
                    postApi('/api/configs/' + config.id + '/delete', {}, function (err, r) {
                        if (err) {
                            return showError(err)
                        }
                        location.reload()
                    });
                });
            },
            upload_config: function (config) {
                getApi('/api/configs/' + config.id + '/show_remotes', function (err, results) {
                    if (err) {
                        return showError(err)
                    }
                    show_upload_config(config, results.show_remotes)
                    // location.reload();
                });
                
            }
        }
    });
};
function upload_config(config) {
    // el: '#div-configs',
    // data: {
    //     xyfx_config: data.xyfx_config,
    //     xyfx_remote: data.xyfx_remote
    // },
    // postApi('/api/configs/' + config.id + '/upload', data, function (err, results) {
    //     if (err) {
    //         return showError(err);
    //     }
    //     location.reload();
    // });
};

$(function() {
    getApi('/api/xyfx/db', function (err, results) {
        if (err) {
            return showError(err)
        }
        initVM(results)
        $('#div-loading').hide()
       
    });
});
$(function() {
    var v = new Vue({
        el: '#form-add-db-config',
        data: {
            serverip: '',
            username: '',
            password: '',
            dbname: ''
        },
        methods: {
            dbsubmit: function (event) {
                showError();
                postApi('/api/xyfx/add_db_config', {
                    serverip: this.serverip,
                    username: this.username,
                    password: this.password,
                    dbname: this.dbname
                }, function (err, result) {
                    if (err) {
                        showError(err)
                    }
                    else {
                        return location.assign('/xyfx/db')
                    }
                    stopLoading()
                });
            }
        }
    });
})
</script>

{% endblock %}

{% block content %}
    
    <div class="uk-width-1-1 uk-margin-bottom" >
        <div class="uk-panel uk-panel-box">
            <ul class="uk-breadcrumb">
            {% for m in menus %}
                {% if m.level == 2 and m.display == 1%}
                <li><a href="{{ m.url }}"><span>{{ m.name }}</span></a></li>
                {% endif %}
            {% endfor %}
            </ul>
        </div>
    </div>
    <div class="data-uk-margin">
        <a class='uk-button uk-button-primary' data-uk-modal="bgclose:false" href="#model_add_db" >  新建 </a>
        <button class="uk-button uk-button-primary" data-uk-modal="{target:'#model_add_db',bgclose:false}"  type="button"> 新建 </button>
        <button class="uk-button uk-button-primary " type="button" disabled>删除</button>
    </div>

    <div id="model_add_db" class="uk-modal " aria-hidden="true" style="display: none; overflow-y: scroll;">
        <div class="uk-modal-dialog  ">
            <button type="button" class="uk-modal-close uk-close"></button>
            <div class="uk-vertical-align-middle" style="width: 450px">
            <p><i class="uk-icon-html5"></i> 新建数据库配置</p>

            <form id="form-add-db-config"  class="uk-panel uk-panel-box uk-form">
                <div class="uk-alert uk-alert-danger uk-hidden"></div>
                <div class="uk-form-row">
                    <div class="uk-form-icon uk-width-1-1">
                        <i class="uk-icon-home"></i>
                        <input v-model="serverip" name="serverip" type="text" placeholder="数据库IP" maxlength="50" class="uk-width-1-1 uk-form-large">
                    </div>
                </div>
                <div class="uk-form-row">
                    <div class="uk-form-icon uk-width-1-1">
                        <i class="uk-icon-user"></i>
                        <input v-model="username" name="username" type="text" placeholder="用户名" maxlength="50" class="uk-width-1-1 uk-form-large">
                    </div>
                </div>
                <div class="uk-form-row">
                    <div class="uk-form-icon uk-width-1-1">
                        <i class="uk-icon-lock"></i>
                        <input v-model="password" name="password" type="password" placeholder="口令" maxlength="50" class="uk-width-1-1 uk-form-large">
                    </div>
                </div>
                <div class="uk-form-row">
                    <div class="uk-form-icon uk-width-1-1">
                        <i class="uk-icon-cog"></i>
                        <input v-model="dbname" name="dbname" type="text" placeholder="数据库名" maxlength="50" class="uk-width-1-1 uk-form-large">
                    </div>
                </div>
                <div class="uk-form-row">
                    <button v-on:click="dbsubmit" class="uk-width-1-1 uk-button uk-button-primary"><i class="uk-icon-sign-in"></i> 保存&激活</button>
                </div>
                
            </form>
            </div>
            
        </div>
    </div>

    <div id="model_remote_list" class="uk-modal " aria-hidden="true" style="display: none; overflow-y: scroll;">
        <div  class="uk-modal-dialog  ">
            <button type="button" class="uk-modal-close uk-close"></button>
            <div id="model_remote_list_detail" class="uk-vertical-align-middle" style="width: 450px">
                <p><i class="uk-icon-html5"></i> 上传数据库配置</p>
                <div class="uk-alert uk-alert-danger uk-hidden"></div>
                <table class="uk-table uk-table-hover">
                    <thead>
                        <tr>
                            <th class="uk-width-1-6"></th>
                            <th class="uk-width-1-6">No.</th>
                            <th class="uk-width-2-6">服务器IP</th>
                            <th class="uk-width-2-6">服务器端口</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="sr in show_remotes">
                            <td>
                                <input type="checkbox" :id="$index" :value="show_remotes[$index].id" v-model="checkedServers[$index]">
                            </td>
                            <td>
                                <span v-text="sr.id"></span>
                            </td>
                            <td>
                                <span v-text="sr.serverip"></span>
                            </td>
                            <td>
                                <span v-text="sr.port"></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button class="uk-button uk-button-primary"  v-on:click="do_upload"> 上传 </button>
            </div>
        </div>
    </div>
    <div id="div-configs" class="uk-width-1-1" style="display:none">
        <table class="uk-table uk-table-hover">
            <thead>
                <tr>
                    <th class="uk-width-1-10">序号</th>
                    <th class="uk-width-1-10">名称</th>
                    <th class="uk-width-2-10">文件名</th>
                    <th class="uk-width-1-10">类型</th>
                    <th class="uk-width-2-10">操作</th>
                    <th class="uk-width-2-10">上传</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="xc in xyfx_configs" >
                    <td>
                        <span v-text="xc.id"></span>
                    </td>
                    <td>
                        <span v-text="xc.name"></span>
                    </td>
                    <td>
                        <span v-text="xc.filename"></span>
                    </td>
                    <td>
                        <span v-text="xc.type"></span>
                    </td>
                    <td>
                        <a href="#0" v-on:click="edit_config(xc)"><i class="uk-icon-cog"></i>
                        <a href="#0" v-on:click="delete_config(xc)"><i class="uk-icon-trash-o"></i>
                    </td>
                    <td>
                        <a href="#model_remote_list" data-uk-modal="bgclose:false"  v-on:click="upload_config(xc)"><i class="uk-icon-upload"></i>
                    </td>
                </tr>
            </tbody>
        </table>
       
    </div>
    <div id="div-loading" class="uk-width-1-1 uk-text-center">
        <span><i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i> 正在加载...</span>
    </div>
{% endblock %}
